<template>
	<div class="my-goods-list">
		<!-- 表格渲染 -->
<MyTable :arr='list'>
  <template #head>
        <th>#</th>
				<th>商品名称</th>
				<th>价格</th>
				<th>标签</th>
				<th>操作</th>
  </template>

  <template #body="scoped">
        <td>{{scoped.obj.id}}</td>
				<td>{{scoped.obj.goods_name}}</td>
				<td>{{scoped.obj.price}}</td>
				<td>
					<div>
					
						<input v-model.trim="scoped.obj.inputValue" v-if="scoped.obj.inputVisible" style="width: 150px" class="tag-input form-control" type="text" @blur="scoped.obj.inputVisible=false" v-focus @keyup.esc="scoped.obj.inputValue=''" @keyup.enter="addFn(scoped.obj)"/> 

						<button v-else class="btn btn-primary btn-sm add-tag" @click="scoped.obj.inputVisible=true">
							+Tag
						</button>
					</div>
            <span class="badge bg-warning text-dark" v-for="(item,index) in scoped.obj.tags" :key="index"> {{item}}</span>
					
				</td>
				<td><button class="btn btn-danger btn-sm" @click=del(scoped.obj.id)>删除</button></td>
  </template>
</MyTable>
	</div>
</template>

<script>
	// 接口：GTE  https://www.escook.cn/api/goods
   import axios from 'axios'
   import MyTable from '../components/MyTable.vue'
    

	export default {
		data() {
			return {
        list:[]
      };
		},
   async created(){
    const {data:res}= await axios.get('https://www.escook.cn/api/goods')
    console.log(res);
    this.list=res.data
    },
    components:{
      MyTable
    },
    methods:{
      del(id){
       this.list= this.list.filter(item=>item.id !==id)
      },
      addFn(obj){
        if (obj.inputValue==='') {
          return
        }
obj.tags.push(obj.inputValue)
obj.inputValue=''
      }
    },
    //自定义指令
    directives:{
      focus:{
        inserted(el){
          el.focus()
        }
      }
    }
	};
</script>

<style>
</style>
